<template>
	<view>
		<PageHead backPath="/pages/talk/index?p=1"></PageHead>
		<view class="margin-30">
			<Acard>
				<view>
					<view>
						标题：
						<u--input
							placeholder="请输入标题"
							border="surround"
							color="#fff"
							v-model="formData.title"
							class="mt-5"
							maxlength="30"
						></u--input>
					</view>
					<view class="mt-10">
						内容：
						<textarea
							v-model="formData.content"
							height="100"
							placeholder="请输入内容"
							border="surround"
							class="mt-5 fs-white u-border padding-15 width-per-100"
							confirm-type="done"
							count
							:maxlength="255"
							style="background-color: transparent;"
						></textarea>
						<view style="text-align: end;">{{ formData.content.length }}/255</view>
					</view>
					<view>
						图片（非必填）：
						<u-upload
							:fileList="formData.img"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							:maxCount="1"
							class="mt-5"
						></u-upload>
					</view>
				</view>
			</Acard>
			<Acard bgFilter pad="10px" class="mt-10" @click.native="sendTalk">
				<view class="fs-center">发 表</view>
			</Acard>
		</view>
		<ParticleBackground></ParticleBackground>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'TalkCreate',
	data() {
		return {
			formData: {
				title: '',
				content: '',
				img: []
			}
		};
	},
	computed: {
		...mapState('user', ['userinfo'])
	},
	methods: {
		deletePic() {
			this.formData.img = [];
		},
		// 读取图片后的处理函数
		afterRead(event) {
			this.formData.img.push({
				...event.file,
				status: 'uploading',
				message: '上传中'
			});
			this.uploadImage(event.file.url);
		},
		uploadImage(filePath) {
			uni.uploadFile({
				url: 'http://127.0.0.1:3000/api/upload/image', // 仅为示例，非真实的接口地址
				filePath,
				name: 'img',
				success: res => {
					let item = this.formData.img[0]; // 获取当前的file对象
					setTimeout(() => {
						// splice 替换一下数组，让vue响应
						this.formData.img.splice(
							0,
							1,
							Object.assign(item, {
								status: 'success',
								message: '',
								url: JSON.parse(res.data).data
							})
						);
					}, 1000);
				}
			});
		},
		async sendTalk() {
			let { title, content, img } = this.formData;
			if (title.length < 1) {
				uni.showToast({
					title: '没输入标题',
					icon: 'error'
				});
				return;
			}
			if (content.length < 1) {
				uni.showToast({
					title: '没输入内容',
					icon: 'error'
				});
				return;
			}
			if (img.length > 0 && img[0].status == 'uploading') {
				uni.showToast({
					title: '图片上传中',
					icon: 'error'
				});
				return;
			}
			let { data } = await uni.$u.http.post('/talk/add', {
				title,
				content,
				img: img[0] ? img[0].url : null,
				user_id: this.userinfo.id,
				society_id: this.userinfo.society_id,
				creationTime: Date.now()
			});
			if (data.code === 200) {
				uni.showToast({
					title: '发表成功',
					icon: 'success',
					duration: 2000
				});
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/talk/index?p=1'
					});
				}, 2000);
			}
		}
	}
};
</script>

<style lang="scss"></style>
